<template>
  <div class="home">
    <!-- 轮播图部分 -->
    <el-carousel :interval="4000" type="card" height="400px" class="banner">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <el-image :src="item.image" fit="cover" class="carousel-image">
          <template #placeholder>
            <div class="image-placeholder">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="carousel-content">
          <h2>{{ item.title }}</h2>
          <p>{{ item.description }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 主要内容区 -->
    <div class="main-sections">
      <!-- 左侧：热门帖子 -->
      <div class="section-left">
        <el-card class="section-card">
          <template #header>
            <div class="card-header">
              <span>热门帖子</span>
              <el-button type="text">更多</el-button>
            </div>
          </template>
          <div class="post-list">
            <div v-for="post in hotPosts" :key="post.id" class="post-item">
              <el-avatar :size="40" :src="post.authorAvatar"></el-avatar>
              <div class="post-content">
                <h4>{{ post.title }}</h4>
                <div class="post-meta">
                  <span>{{ post.author }}</span>
                  <span>{{ post.views }} 阅读</span>
                  <span>{{ post.comments }} 评论</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧：最新动态 -->
      <div class="section-right">
        <el-card class="section-card">
          <template #header>
            <div class="card-header">
              <span>最新动态</span>
              <el-button type="text">更多</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="activity in activities"
              :key="activity.id"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Picture } from '@element-plus/icons-vue'

// 轮播图数据
const carouselItems = ref([
  {
    id: 1,
    title: '新版本更新公告',
    description: '探索全新版本带来的精彩内容',
    image: 'https://via.placeholder.com/800x400'
  },
  {
    id: 2,
    title: '玩家攻略征集',
    description: '分享你的游戏心得，赢取丰厚奖励',
    image: 'https://via.placeholder.com/800x400'
  },
  {
    id: 3,
    title: '社区活动',
    description: '参与社区活动，结识更多游戏伙伴',
    image: 'https://via.placeholder.com/800x400'
  }
])

// 热门帖子数据
const hotPosts = ref([
  {
    id: 1,
    title: '新手入门攻略：如何快速上手游戏',
    author: '游戏达人',
    authorAvatar: 'https://via.placeholder.com/40',
    views: 1234,
    comments: 56
  },
  {
    id: 2,
    title: '最新版本更新内容详解',
    author: '官方小编',
    authorAvatar: 'https://via.placeholder.com/40',
    views: 2345,
    comments: 78
  },
  {
    id: 3,
    title: '游戏技巧分享：如何提高胜率',
    author: '职业玩家',
    authorAvatar: 'https://via.placeholder.com/40',
    views: 3456,
    comments: 90
  }
])

// 最新动态数据
const activities = ref([
  {
    id: 1,
    content: '新用户 小明 加入了社区',
    time: '2024-03-20 10:00',
    type: 'primary'
  },
  {
    id: 2,
    content: '用户 游戏达人 发布了新攻略',
    time: '2024-03-20 09:30',
    type: 'success'
  },
  {
    id: 3,
    content: '系统更新：新增表情包功能',
    time: '2024-03-20 09:00',
    type: 'info'
  }
])
</script>

<style scoped>
.home {
  padding: 20px;
}

.banner {
  margin-bottom: 30px;
}

.carousel-image {
  width: 100%;
  height: 100%;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.carousel-content h2 {
  margin: 0;
  font-size: 24px;
}

.carousel-content p {
  margin: 10px 0 0;
  font-size: 16px;
}

.main-sections {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.section-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.post-item {
  display: flex;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.post-item:last-child {
  border-bottom: none;
}

.post-content {
  flex: 1;
}

.post-content h4 {
  margin: 0 0 5px;
  font-size: 16px;
}

.post-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 14px;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

:deep(.el-timeline-item__content) {
  color: #666;
}
</style>
